<clr-datagrid [clrDgLoading]="loading" [(clrDgSelected)]="selected" >
    <clr-dg-action-bar>
        <div class="btn-group">
            <button type="button" class="btn btn-sm btn-secondary" (click)="onCreate()">
                <clr-icon shape="plus" size="16"></clr-icon>
                {{"APP_ADD"|translate}}
            </button>
            <button type="button" class="btn btn-sm btn-secondary" (click)="onDelete()" [disabled]="selected.length<1">
                <clr-icon shape="close"></clr-icon>
                {{"APP_DELETE"|translate}}
            </button>
        </div>
        <button type="button" class="btn btn-sm btn-secondary" (click)="onImport()">
            <clr-icon shape="import" size="16"></clr-icon>
            {{"APP_IMPORT"|translate}}
        </button>
        <button type="button" class="btn btn-sm btn-secondary" (click)="onUpgrade(selected[0])"
                [disabled]="selected.length!==1">
            <clr-icon shape="circle-arrow"></clr-icon>
            {{"APP_CLUSTER_UPGRADE"|translate}}
        </button>
    </clr-dg-action-bar>
    <clr-dg-column>{{"APP_NAME"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_VERSION"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_NODE_SIZE"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_STATUS"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_CREATED_DATE"|translate}}</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
        <clr-dg-cell>
            <span *ngIf="item.status === 'Running'">
                <a href="javascript:void(0)" (click)="onDetail(item)">{{item.name}}</a>
            </span>
            <span *ngIf="item.status !=='Running'">
                {{item.name}}
            </span>
        </clr-dg-cell>
        <clr-dg-cell>{{item.spec.version}}</clr-dg-cell>
        <clr-dg-cell>

            <span *ngIf="item.status === 'Running'">
            <a href="javascript:void(0)" (click)="onNodeDetail(item)">{{item.nodeSize}}</a>
            </span>
            <span *ngIf="item.status !=='Running'">
                {{item.nodeSize}}
            </span>
        </clr-dg-cell>
        <clr-dg-cell>

            <span *ngIf="item.status === 'Initializing' || item.status === 'Upgrading'||item.status === 'Failed'">
               <a (click)="onStatusDetail(item)" href="javascript:void(0)">{{item.status}}</a>
            </span>
            <span *ngIf="item.status!=='Initializing' && item.status!=='Failed'&& item.status !== 'Upgrading'">
               {{item.status}}
            </span>
            <clr-spinner clrAssertive clrInline
                         *ngIf="item.status === 'Initializing' || item.status === 'Terminating'||item.status === 'Creating' || item.status == 'Upgrading'">
                Loading...
            </clr-spinner>
        </clr-dg-cell>
        <clr-dg-cell>{{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>
        <clr-dg-pagination #pagination [(clrDgPage)]="page" [clrDgPageSize]="size" [clrDgTotalItems]="total"
                           (clrDgPageChange)="refresh()">
            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
            {{"APP_PAGER_TOTAL"|translate}} {{pagination.totalItems}} {{"APP_CLUSTER"|translate}}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>

